<template>
  <el-drawer title="任务名称" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body size="500px">
    <div class="drawer-body">
      <ul class="tablist">
        <li :class="active==index?`active`:``" @click="getActive(index)" v-for="(item,index) in tablist" :key="index">{{ item.label }}</li>
      </ul>
      <ul class="viewAutoTask" v-if="active==0">
        <li class="rowWidth">
          <div class="code">任务状态：</div>
          <div class="content c_successs">已启用</div>
        </li>
        <li>
          <div class="code">创建时间：</div>
          <div class="content">2024-05-07 14:43</div>
        </li>
        <li>
          <div class="code">最后操作时间：</div>
          <div class="content">2024-05-07 14:43</div>
        </li>
        <li class="rowWidth">
          <div class="code">触发规则：</div>
          <div class="content">入群 123 分钟后自动添加好友</div>
        </li>
        <li class="rowWidth">
          <div class="code">排除以下：</div>
          <div class="content">
            <div class="rote">
              <span class="rotetitle">身份性别：</span>
              <div class="identity">群主、管理员、企微客户、白名单、企微客户、黑名单</div>
            </div>
          </div>
        </li>
        <li class="rowWidth">
          <div class="code">验证消息：</div>
          <div class="content">今天是周二</div>
        </li>
      </ul>
      <el-table
        v-if="active==1"
        :data="tableDataList"
        ref="customerMgtList"
      >
        <el-table-column
          :label="item.label"
          align="left"
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.key"
          :min-width="item.minWidth ? item.minWidth : ``"
          :fixed="item.fixed ? item.fixed : false"
          :show-overflow-tooltip="true"
        >
          <!--用于表格自定义-->
          <template slot-scope="scope">
            <div v-if="item.key=='name'">
              <div class="userInfo">
                <img src="@/assets/images/profile.jpg"/>
                <div class="name">群名称</div>
                <div class="label">群成员：2人</div>
              </div>
            </div>
            <div v-else>{{ scope.row[item.key] }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>

</template>

<script>

import {listUser} from "@/api/system/user";

export default {
  name: "viewAutoTask",
  components: {},
  data() {
    return {
      active: 0,
      tablist: [
        {value: 0, label: '任务详情',},
        {value: 1, label: '所选群聊（1）',},
      ],
      tableColumns: [
        {key: 'name', label: `群名称`, visible: true, minWidth: 150, fixed: true},
      ],
      tableDataList: [
        {
          name:'小红'
        }
      ],
      form: {},


    }
  },
  created() {
  },
  methods: {
    getActive(index) {
      this.active = index;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser().then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log('this.queryParams', this.queryParams);
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit("handleCloseFilter"); //关闭弹窗;
    },
  }
}
</script>

<style scoped lang="scss">
.viewAutoTask {
  display: flex;
  flex-wrap: wrap;

  li {

    margin: 0px 20px;
    margin-bottom: 20px;
    width: calc(50% - 40px);
    list-style: none;

    &.rowWidth {
      width: 100%;
    }

    .code {
      color: rgba(0, 0, 0, .45);
      margin-bottom: 4px;
    }

    .content {
      .rote {
        border: 1px solid #eee;
         display: flex;
        padding: 15px;
        .rotetitle{
          display: inline-block;
          width: 110px;
        }
        .identity {
          flex: 1;
        }
      }
    }

  }
}

.tablist {
  font-size: 14px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  background: #fff;
  margin: 20px 20px 20px 20px;

  li {
    cursor: pointer;
    font-weight: 400;
    list-style: none;
    position: relative;
    display: flex;
    height: 30px;
    align-items: center;
    font-size: 14px;
    padding: 0px 15px;
    border: 1px solid #eee;

    &.active {
      color: #3070ff;
      border-color: #3070ff;
    }
    &:first-child{
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    &:last-child{
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
}
.userInfo {
  border-radius: 4px;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
  padding-left: 50px;
  font-size: 14px;
  list-style: none;
  text-align: left;

  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    position: absolute;
  }

  .label {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

</style>
